<template>
  <div class="app-container commercial-content">
    <div class="dashboard-container" ref="table">
      <el-row :gutter="20">
        <el-col :span="24">
          <div>
            <el-statistic
              group-separator=","
              :precision="0"
              :value="statistics.count_member"
              title="用户数量"
            ></el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="statistics.total_score"
              title="账户总金额"
            >
              <template slot="prefix">
                ￥
              </template></el-statistic>
          </div>
        </el-col>
        
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              decimal-separator="."
              :value="statistics.available_score"
              title="可用下单金额"
            >
              <template slot="prefix">
                ￥
              </template>
              <template slot="suffix">
                <el-button type="primary " size="mini" @click="handleNewOrder"
                  >立即下单</el-button
                >
              </template>
            </el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="0"
              :value="statistics.count_unshipping_purchase"
              title="未发货订单数量"
            ></el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="statistics.unshipping_purchase_amount"
              title="未发货订单金额"
            >
              <template slot="prefix">
                ￥
              </template></el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="0"
              :value="statistics.count_shipped_purchase"
              title="已发货订单数量"
            ></el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="statistics.shipped_purchase_amount"
              title="已发货订单金额"
            >
              <template slot="prefix">
                ￥
              </template></el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="0"
              :value="statistics.count_receipt_purchase"
              title="已收货订单数量"
            ></el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="statistics.receipt_purchase_amount"
              title="已收货订单金额"
            >
              <template slot="prefix">
                ￥
              </template></el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="0"
              :value="statistics.count_purchase"
              title="全部订单数量"
            ></el-statistic>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <el-statistic
              group-separator=","
              :precision="2"
              :value="statistics.purchase_amount"
              title="全部订单金额"
            >
              <template slot="prefix">
                ￥
              </template></el-statistic>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--新建 弹框-->
    <el-dialog
      class="add-dialog"
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      :before-close="modalClose"
      :close-on-press-escape="false"
      append-to-body
    >
      <div v-loading="dialogloading">
        <el-form
          ref="manuForm"
          :model="orderForm"
          label-width="180px"
          size="small"
          :rules="rules"
        >
        <el-form-item label="下单金额" prop="amount" :rules="$rule.required">
          <el-input
            v-model="orderForm.amount" 
            size="small"
            placeholder="请输入下单金额"
            clearable
            maxlength="20"
          ></el-input>
        </el-form-item>

        </el-form>
        <div class="tool2" style="margin-top: 45px">
          <el-button type="primary" size="medium" @click="handleOrderSubmit"
            >确定</el-button
          >
          <el-button size="medium" @click="modalClose">取消</el-button>
        </div>
      
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "下单",
      dialogloading: true,
      statistics: {
        count_member: 0,
        total_score: 0,
        available_score: 0,
        count_purchase: 0,
        purchase_amount: 0,
        count_unshipping_purchase: 0,
        unshipping_purchase_amount: 0,
        count_shipped_purchase: 0,
        shipped_purchase_amount: 0,
        count_receipt_purchase: 0,
        receipt_purchase_amount: 0,
        created_at: "",        
      },
      orderForm: {
        amount: "",
      },
      // 验证表单
      rules: {
        
      },
    };
  },
  watch: {
    formData: {
      handler(newName, oldName) {

        // ...
      },
      deep: true,
    },
  },
  created() {
    this.handleRequest();
  },
  mounted() {
    const that = this;
    // that.$util.autoHeight(that, that.$refs.table.$el);
  },
  methods: {
    searchRequest() {
      this.currentPage = 1;
      this.handleRequest();
    },
    /**
     * 请求列表
     */
    async handleRequest() {
      const that = this;

      try {
        that.loading = true;
        const { result } = await that.$.dashboard.statistics({});
        that.statistics = result;
        that.orderForm.amount = that.statistics.available_score;
        that.loading = false;
      } catch (e) {
        that.loading = false;
      }
    },

    handleSelect() {
      this.currentPage = 1;
      this.handleRequest();
    },
    /**
     * 关闭对话框
     */
    modalClose() {
      this.dialogVisible = false;
      this.dialogCancelVisible = false;
      this.diaAddress = false;
    },
    // 新增订单
    async handleNewOrder() {
      const that = this
      this.dialogloading = false;
      this.dialogTitle = '新增订单';      
      this.dialogVisible = true;
    },
    // 提交
    handleOrderSubmit() {
      const that = this;
      that.$refs.manuForm.validate(async (v) => {
        if (!v) {
          return false;
        }
        try {
          that.dialogloading = true;
          const { result } = await that.$.purchase.purchaseCreate(that.orderForm);
          that.dialogloading = false;
          that.dialogVisible = false;
          that.$message({ type: "success", message: "新建订单成功" });
          that.handleRequest();
          // 清空 orderForm 的项目值
          that.orderForm.amount = '';
        } catch (e) {
          that.dialogloading = false;
        }
      });
    },
  },
};
</script>
<style lang="scss">
  .dashboard-container {
    height: 100%;
    background-color: #FFF;
    padding: 20px 20px 0;
    border-radius: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #EBEEF5;
  }
  .el-statistic {
    margin-bottom: 20px;
    background-color: #f6f6f6;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #EBEEF5;
  }
  .like {
    cursor: pointer;
    font-size: 25px;
    display: inline-block;
  }
</style>